<template>
	<view class="content-tabar">
		<view class="header">分类</view>
		<view class="fenge"></view>
		<view class="flex-row flex-content-between">
			<view class="flex-column">
				<view v-for="(tab,index) in classList" @tap="changeTab(index)">
					<view :class="index==curr?`tab-ac`:`tab`">
						<view class="top25"></view>
						<view :class="index==curr?`tab-one-ac`:`tab-one`">
							<view>{{tab.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="youbian">
				<view v-if="classList[curr].data.length==0">
					<view class="flex-column">
						<image class="not-img" src="../../static/cart/nothas.png" mode="scaleToFill"></image>
						<view class="not-txt">抱歉，暂无商品</view>
					</view>
				</view>
				<view v-if="classList[curr].data.length>0">
				<view class="top30"></view>
					<scroll-view :scroll-y="true" class="datascroll" @scrolltolower="getGoodsList" lower-threshold="200">
						<view class="datascroll-top">
							<view v-for="(item,inde) in classList[curr].data" @tap="toGoodsInfo(item.id)">
								<view class="ones flex-row flex-content-between">
									<view class="flex-row">
										<image class="goods-img" :src="$utils.cdnImg(item.image)" mode="widthFix"></image>
										<view class="flex-column goods-price">
											<view>{{item.title}}</view>
											<view class="tags flex-row">
												<view v-for="tag in item.tags">
													{{tag.title}}
												</view>
											</view>
											<view class="flex-row goods-price1">
												<view>￥</view>
												<view>{{item.price}}</view>
												<view>{{item.original_price}}</view>
											</view>
											<view class="jifen" v-if="item.score>0">送{{parseInt(item.score)}}积分</view>
										</view>
									</view>
									<view class="flex-column-reverse">
										<image @tap.stop="addCart(item.goodsitem,item)" class="gwc-img" src="../../static/index/gwc.png" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<attr ref="gouwuces" :attrList="attrList" @confirm="confirm"></attr>
	</view>
</template>

<script>
	import attr from "@/components/attr.vue"
	export default{
		components:{
			attr
		},
		data(){
			return{
				attrList:[],
				goodsInfo:null,
				curr:0,//选择的tab下标
				classList:[
					{
						name:'五花肉',
						data:[
							
						]
					},
					{
						name:'前腿肉',
						data:[
						]
					},
					{
						name:'后腿肉',
						data:[]
					}
				]
			}
		},
		onLoad() {
			this.getAtegoryList();
		},
		onPullDownRefresh() {
			let classList = this.classList;
			classList.forEach(item=>{
				item.page = 1;
				item.data = [];
			})
			this.getGoodsList(()=>{
				uni.stopPullDownRefresh();
			});
		},
		methods:{
			confirm(e){
				let that = this;
				let data = {
					cart:[
						{
							mumerchant_goods_id:this.goodsInfo.id,
							mumerchant_goods_item_id:e.data.id,
							num:e.num
						}
					],
					type:'add'
				}
				console.log(data);
				this.$api.changeShopCart(data).then(res=>{
					that.$store.dispatch("getCartList")
					that.$utils.showMessage("添加到购物车成功")
				})
			},
			//获取商品分类
			getAtegoryList(){
				let that = this;
				
				this.$api.getAtegoryList().then(res=>{
					console.log(res);
					if(res.length>0){
						res.forEach(item=>{
							item.data = []
							item.page = 1
						})
						that.classList = res;
						that.getGoodsList();
					}
				})
			},
			//获取商品列表
			getGoodsList(callback){
				let goodsListInfo = this.classList[this.curr];
				let that = this;
				if(goodsListInfo.page==0){
					return
				}
				this.$api.getGoodsList({
					page:goodsListInfo.page,
					goods_type:1,
					category_id:goodsListInfo.id
				},false).then(res=>{
					// console.log(res);
					if(res.data.length>0){
						goodsListInfo.data.push(...res.data)
						goodsListInfo.page +=1
					}else{
						goodsListInfo.page = 0
					}
					that.classList[that.curr] = goodsListInfo
				}).finally(()=>{
					if(typeof callback == 'function'){
						callback()
					}
				})
			
			},
			//修改选择的tab
			changeTab(index){
				this.curr = index;
				let listData = this.classList[index]
				if(listData.data.length==0){
					this.getGoodsList();
				}
			},
			//跳转到商品详情
			toGoodsInfo(id){
				uni.navigateTo({
					url:'/pages/goods/goods_info?id='+id
				})
			},
			//添加到购物车
			addCart(goodsitem,goodsinfo){
				this.attrList = goodsitem
				this.goodsInfo = goodsinfo;
				this.$refs.gouwuces.open();
			}
		}
	}
</script>

<style lang="scss">
	.jifen{
		font-size: 14rpx;
		color: #00aa7f;
		margin-left: 5rpx;
	}
	.tags{
		height: 40rpx;
		margin-top: 5rpx;
		>view{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1px solid #FF5000;
			margin-right: 5rpx;
			padding-left: 5rpx;
			padding-right: 5rpx;
		}
	}
	.datascroll-top{
		padding-bottom: 20rpx;
	}
	/* #ifdef H5 */
	.datascroll{
		width: 100%;
		height: calc(100vh - 265rpx);
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.datascroll{
		width: 100%;
		height: calc(100vh - 165rpx);
	}
	/* #endif */
	/* #ifdef MP */
	.datascroll{
		width: 100%;
		height: calc(100vh - 265rpx);
	}
	/* #endif */
	.gwc-img{
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
		margin-bottom: 10rpx;
	}
	.goods-price1{
		margin-top: 15rpx;
		>view:nth-child(1){
			font-size: 22rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #FF5000;
			margin-top: 10rpx;
		}
		>view:nth-child(2){
			font-size: 34rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF5000;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-decoration: line-through;
			margin-left: 5rpx;
			margin-top: 10rpx;
		}
	}
	.goods-price{
		margin-left: 20rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 12rpx;
		}
	}
	.goods-img{
		width: 172rpx;
	}
	.ones{
		width: 100%;
		height: 172rpx;
		// background-color: #69D330;
		margin-bottom: 40rpx;
	}
	.not-txt{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 16rpx;
	}
	.not-img{
		width: 260rpx;
		height: 260rpx;
		margin-top: 234rpx;
		margin-left: 131rpx;
	}
	.fenge{
		width: 750rpx;
		height: 0px;
		opacity: 1;
		border-bottom: 1rpx solid #EFEFEF;
	}
	.youbian{
		width: 100%;
		height: calc(100vh - 125rpx);
		background-color: #FFFFFF;
	}
	.top25{
		width: 100%;
		height: 25rpx;
	}
	.tab-one{
		height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;
		line-height: 50rpx;
	}
	.tab-one-ac{
		height: 50rpx;
		border-left: 6rpx solid $default-button-color;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-color;
		text-align: center;
		line-height: 50rpx;
	}
	.tab{
		width: 189rpx;
		height: 100rpx;
	}
	.tab-ac{
		width: 189rpx;
		height: 100rpx;
		background-color: #FFFFFF;
	}
	.header{
		width: 100%;
		height: 123rpx;
		background-color: #FFFFFF;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		line-height: 113rpx;
	}
</style>